WordPress Lancaster
Wifi: CFGuest
CoworkingLov3
Learning Vue.js as a WordPress Developer
By: Austin Ginder
About me
- I'm a Web Developer, married, age 33, 6 kids.
- Past work (2010 - 2015): Built many custom WordPress themes using Underscores for small businesses.
- Today I run Anchor Hosting - Hassle-free WordPress hosting for freelancers and web professionals.
- Comfortable with (antiqued) jQuery
- New to modern JavaScript, tried learning React.JS however ended up using Vue.js instead.
- Currently using Vue.js within my own management tools.π€π¨π½βπ»π
My JavaScript Story
Creating a monster with jQuery,
and how to fix.
Excuse: But it's too hard, I mean where do I even begin?
The modern world of JavaScript is complex
Taken from risingstars.js.org/2017/
So, Where do I begin?
Just start with Vue.js
Vue.js is a great fit for WordPress
- Easy to learn - Simple CDN drop-ins like jQuery
- Open source and independent - Not tied directly to a business like Google or Facebook
- Modular by design - Plays well alongside other frameworks
Just ask developers.
Paradigm shift coming from jQuery
- jQuery is all about "where" things are located.
- Vue.js is all about data.
In jQuery
- Give everything a unique name
- Tell each thing what they do
- Track all changes and are ...
- Reponsible to keep everything updated
This is bad
- Data is scattered throughout the html DOM
- It requires "you" to remember everything and constantly micro manage all aspects of the UI.
In Vue.js
- Link everything to a data
- Tell each thing what to do with that data
- Update data as needed and...
- Watch the the UI magically react
Trust me, This really feels like magic.
Code examples jQuery/Vue.js
jQuery('.filter-select').change(function() {
if (jQuery(this).val() == "all") {
jQuery('.site .checkbox-selector').addClass("selected");
selected_count = jQuery('.site .checkbox-selector.selected').length;
jQuery(".selected-sites").text("Selected "+ selected_count +" sites");
}
if (jQuery(this).val() == "visible") {
jQuery('.site .checkbox-selector').removeClass("selected");
jQuery('.site .checkbox-selector:visible').addClass("selected");
selected_count = jQuery('.site .checkbox-selector.selected').length;
jQuery(".selected-sites").text("Selected "+ selected_count +" sites");
}
if (jQuery(this).val() == "none") {
jQuery('.site .checkbox-selector').removeClass("selected");
selected_count = jQuery('.site .checkbox-selector.selected').length;
jQuery(".selected-sites").text("Selected "+ selected_count +" sites");
}
});
Code examples jQuery/Vue.js
selectSites() {
if (this.site_selected == "all") {
this.sites.forEach(site => site.selected = true );
}
if (this.site_selected == "visible") {
this.sites.forEach(site => site.selected = false );
this.paginatedSites.forEach(site => site.selected = true );
}
if (this.site_selected == "none") {
this.sites.forEach(site => site.selected = false );
}
},
π
Modern JavaScript Awesomeness β‘
- Virtual DOM - Crazy fast
- Lazy load - Ultra fast
- Reactivty - Less coding
When should I use Vue.js over jQuery?
- It Depends
- With WordPress, jQuery still good at quick and easy things like sliders, image previews and basic UI.
Vue.js is best for custom JavaScript.
jQuery('.filter-select').change(function() {
if (jQuery(this).val() == "all") {
jQuery('.site .checkbox-selector').addClass("selected");
selected_count = jQuery('.site .checkbox-selector.selected').length;
jQuery(".selected-sites").text("Selected "+ selected_count +" sites");
}
if (jQuery(this).val() == "visible") {
jQuery('.site .checkbox-selector').removeClass("selected");
jQuery('.site .checkbox-selector:visible').addClass("selected");
selected_count = jQuery('.site .checkbox-selector.selected').length;
jQuery(".selected-sites").text("Selected "+ selected_count +" sites");
}
if (jQuery(this).val() == "none") {
jQuery('.site .checkbox-selector').removeClass("selected");
selected_count = jQuery('.site .checkbox-selector.selected').length;
jQuery(".selected-sites").text("Selected "+ selected_count +" sites");
}
});
Manage Example Rewriten in Vue.js
For Developers: Recommended Links
- https://vuejs.org/v2/guide/ β Official guide
- https://laracasts.com/series/learn-vue-2-step-by-step β Amazing video series by Jeffrey Way / Laracasts
- https://www.vuemastery.com/courses/intro-to-vue-js/vue-instance β Intro to Vue.js video series by Vue Mastery
- https://vuetifyjs.com/en/ο»Ώ β Material design UI kit for Vue.js
Take aways
- Modern JavaScript is very approachable with Vue.js
- It's 2018, the JavaScript ecosystem is stablizing. Now is a great time to just pick a modern framework and get going.
Q/A
WordPress Lancaster
Wifi: CFGuest
CoworkingLov3